<template>
	<view class="pagebox" :style="{backgroundColor:default_config.bgc}">
		<view class="pond-head" @tap="init">
			<image :src="default_config.topimg" alt="">
		</view>
		<view class="container-out">
			<view class="container-in">
				<view class="content-out" v-for="(box,index) in list"
					:key="index"
					:style="{left:box.left+'px',top:box.top+'px','background-color':index==indexSelect?colorAwardSelect:colorAwardDefault}">
					<image class="pond-name-img" mode="aspectFit" :src="box.image_url" alt="">
					<view class="pond-name">{{box.name}}</view>
				</view>
			</view>
			<view class="start-btn" @tap="startBtn">
				<image :src="default_config.btn_img" style="height:80px;width:100%;" alt="">
				<image :src="default_config.cj_img" :style="{'top':btntop+'px'}"
					style="position:absolute;left:5px;height:68px;width:89px;top:0;" alt="">
			</view>
			<view class="circle" v-for="(item,index) in circleList"
				:key="index"
				:style="{'top':item.topCircle+'px','left':item.leftCircle+'px','background-color':index%2==0?colorCircleFirst:colorCircleSecond}">
			</view>
		</view>
		<view class="prize" v-if="prize==1">
			<view class="prize-box">
				<image class="prize-img" :src="default_config.success_img" alt="">
				<view class="prize-msg">
					<view>恭喜</view>
					<view>抽中{{prize_name}}</view>
					<view class="continue" @tap="conTinue">继续抽奖</view>
				</view>
			</view>
		</view>
		<!-- 抽奖规则说明 -->
		<view class="bianju">
			<view :style="{fontSize:default_config.fontsize+'px'}"  >
				<view v-for="item in default_config.desc" :style="{color:default_config.fontcolor}">
					<view style="margin-left: 25px;margin-top: 5px;">{{item}}</view>
				</view>
			</view>
		</view>
		<view class="prize" v-if="prize==2">
			<view class="prize-box">empty_img
				<image class="prize-img2" :src="default_config.empty_img" alt="">
				<view class="prize-msg">
					<view>谢谢参与</view>
					<view>再换个姿势抽奖</view>
					<view class="continue" @tap="conTinue">继续抽奖</view>
				</view>

			</view>
		</view>
		<view class="men" v-if="men"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				drawID:0,
				default_config:{},
				list: [],
				circleList: [],
				colorCircleFirst: "#F12416",
				colorCircleSecond: "#FFFFFF",
				colorAwardDefault: "#F5F0FC",
				colorAwardSelect: "#ffe400",
				btntop: 0, //按钮的样式
				time: '', //定时器
				indexSelect: 0, //奖品下标
				lottert: 0, //中奖下标
				prize: 0, //是否中奖
				prize_name: '', //奖品名字
				men: false,
				type:[],//领奖方式	0邮寄  1自提
				bingotype:0,//抽奖方式	1积分  2余额
				bingorule:0,//抽奖规则   1一天几次	2一人几次
				bingotimes:0,//抽奖次数
				address:'',//自提地址
				endtime:0,//结束时间
				wast:0,//抽奖消耗
				both:false,//是否支持两种领奖方式
			}
		},
		onLoad(options){
			if(options.draw_id){
				this.drawID = options.draw_id
			}
		},
		created() {
			this.getconfig()
			this.getReward();
			this.getDraw()
		},
		methods: {
			getconfig(){
				this.moxiPost('/plugin/jgg/index/index/getdefault',{draw_id:this.drawID},(res)=>{
					// 如果没有config，就是没有自定义样式
					if(res.data.config.length == 0){
						this.default_config = res.data;
					}
					else{
						if(res.data.config.desc.length != 0){
							this.default_config = res.data.config
						}
					}
					
				})
			},
			getDraw(){
				this.moxiPost('/plugin/jgg/index/index/draw',{draw_id:this.drawID},(res)=>{
					this.bingotype = parseInt(res.data.bingotype);
					this.bingorule = parseInt(res.data.bingorule);
					this.bingotimes = parseInt(res.data.bingotimes);
					this.endtime = res.data.endtime;
					this.wast = res.data.wast;
					res.data.type.forEach(item=>{
						this.type.push(parseInt(item))
					})
					this.both = [1, 2].every(num => this.type.includes(num));
				})
				
			},
			getReward(){
				this.moxiPost('/plugin/jgg/index/index/getreward',{id:this.drawID},(res)=>{
					res.data.reward.forEach((item)=>{
						this.list.push({
							id:item.rid,
							type:1,
							image_url:item.img,
							name:item.name,
							rstatus:item.rstatus
						})
					})
					this.init()	
				})
				
			},
			init() {
				var ts = this;
				var list = this.list;
				var left = 9;
				var top = 9;

				for (var i = 0; i < 8; i++) {
					if (i == 0) {
						left = 9;
						top = 9;
					} else if (i < 3 && i != 0) {
						top = top;
						left = left + 98 + 4;
					} else if (i >= 3 && i < 5) {
						left = left;
						top = top + 79 + 4;
					} else if (i >= 5 && i < 7) {
						left = left - 98 - 4;
						top = top;
					} else if (i >= 7 && i < 8) {
						left = left;
						top = top - 79 - 4;
					}
					list[i].top = top;
					list[i].left = left;
				}
				this.list = list;
				var cleft = 4; //e
				var ctop = 4; //a
				var dian = [];
				for (var j = 0; j < 24; j++) {
					if (j == 0) {
						cleft = 4;
						ctop = 4;
					} else if (j < 6) {
						ctop = 2;
						cleft += 55;
					} else if (j == 6) {
						ctop = 2;
						cleft = 330;
					} else if (j < 12) {
						ctop += 46;
						cleft = 331.5;
					} else if (j == 12) {
						ctop = 272.5;
						cleft = 330;
					} else if (j < 18) {
						ctop = 275;
						cleft -= 55;
					} else if (j == 18) {
						ctop = 273;
						cleft = 5;
					} else {
						if (!(j < 24)) return;
						ctop -= 46, cleft = 2.5;
					}
					dian.push({
						topCircle: ctop,
						leftCircle: cleft
					})
				}

				this.circleList = dian;
				setInterval(function() {
					if (ts.colorCircleFirst == "#FFFFFF") {
						ts.colorCircleFirst = "#F12416";
						ts.colorCircleSecond = "#FFFFFF";
					} else {
						ts.colorCircleFirst = "#FFFFFF";
						ts.colorCircleSecond = "#F12416";
						ts.btntop = 0;
					}
				}, 900)
				this.time = setInterval(function() {
					if (ts.btntop == 0) {
						ts.btntop = -3;
					} else {
						ts.btntop = 0;
					}
				}, 900)
			},
			startBtn(e) {
			    clearInterval(this.time);
			    this.men = true;
			    this.btntop = 0;
			    this.lottert = 0;
			    var ts = this;
			    // 调用后端抽奖接口
			    this.moxiPost('/plugin/jgg/user/index/bingo', {draw_id: this.drawID}, (res) => {
			            // 获取后端返回的中奖奖品ID
			            const prizeId = res.data.rid;
			            
			            // 在奖品列表中查找中奖位置
			            const targetIndex = ts.list.findIndex(item => item.id === prizeId);
			            
			            if (targetIndex !== -1) {
			                // 开始抽奖动画，目标位置为后端返回的奖品
			                ts.startAnimation(targetIndex);
			            } else {
			                // 未找到奖品（谢谢参与）
			                ts.showPrizeResult(null);
			            }
			        
			    });
			},
			    // 抽奖动画方法
			    startAnimation(targetIndex) {
			        const ts = this;
			        let i = this.indexSelect;
			        let speed = 100; // 初始速度
			        let times = 0;   // 动画执行次数
			        
			        const animate = () => {
			            i = (i + 1) % 8;
			            ts.indexSelect = i;
			            times++;
			            
			            // 速度逐渐变慢
			            if (times < 10) {
			                speed = 100 - times * 5;
			            } else if (times < 20) {
			                speed = 150;
			            } else {
			                speed = 200;
			            }
			            
			            // 到达目标位置且转够圈数后停止
			            if (times > 30 && i === targetIndex) {
			                ts.showPrizeResult(i);
			                return;
			            }
			            
			            ts.animationTimer = setTimeout(animate, speed);
			        };
			        
			        // 启动动画
			        ts.animationTimer = setTimeout(animate, speed);
			    },
			    
			    // 显示抽奖结果
			    showPrizeResult(index) {
			        if (index === null || this.list[index].rstatus === 0) {
			            this.prize = 2; // 谢谢参与
			        } else {
			            this.prize_name = this.list[index].name;
			            this.prize = 1; // 中奖
			        }
			        this.men = false;
			        this.recoverButtonAnimation();
			    },
			    
			    // 恢复按钮动画
			    recoverButtonAnimation() {
			        this.time = setInterval(() => {
			            this.btntop = this.btntop === 0 ? -3 : 0;
			        }, 900);
			    }
			,
			randomNum(minNum, maxNum) {
				switch (arguments.length) {
					case 1:
						return parseInt(Math.random() * minNum + 1, 10);
						break;
					case 2:
						return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
						break;
					default:
						return 0;
						break;
				}
			},
			conTinue() {
				this.men = false;
				this.prize = 0;
			}
		}
	}
</script>

<style scoped>
	.bianju {
		display: flex;
		 padding-left: 5%; 
		 padding-top: 5%;
	}
	/* 系统化断点（按最小宽度升序排列） */
	@media screen and (max-width: 375px) {  /* iPhone 8/SE */
	  .bianju { margin-left: -35rpx; }
	}
	
	
	
	@media screen and (max-width: 390px) {  /* iPhone 12/13/14 pro max*/
	  .bianju { margin-left: -20rpx; }
	}
	@media screen and (max-width: 430px) {  /* iPhone 12/13/14 pro max*/
	  .bianju { margin-left: -5rpx; }
	}
	@media screen and (max-width: 414px) {  /* iPhone Plus系列 */
	  .bianju { margin-left: -20rpx; }
	}
	
	
	
	
	
	.pagebox {
		width: 100%;
		height: 100vh;
	}

	.pond-head image {
		width: 100%;
		height: 430rpx;
	}

	.container-out {
		height: 283px;
		width: 340px;
		background-color: #F47915;
		margin: 16px auto 15px auto;
		border-radius: 8px;
		position: relative;
	}

	.circle {
		position: absolute;
		display: block;
		border-radius: 50%;
		height: 7px;
		width: 7px;
	}

	.content-out {
		position: absolute;
		height: 72px;
		width: 98px;
		background-color: #f5f0fc;
		border-radius: 8px;
		box-shadow: 0 8px 0 #FFCEC0;
	}

	.container-in {
		width: 320px;
		height: 263px;
		background-color: #f12416;
		border-radius: 10px;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.pond-name-img {
		position: absolute;
		top: 6px;
		left: 0;
		width: 100%;
		height: 46px;
		object-fit: fill;
		z-index: 1;
	}

	.pond-name {
		position: absolute;
		top: 75%;
		color: #c62015;
		width: 98px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		font-size: 9pt;
		text-align: center;
	}

	.start-btn {
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border-radius: 8px;
		height: 79px;
		width: 98px;
		color: #f6251e;
		text-align: center;
		font-weight: bolder;
		line-height: 77px;
	}

	.prize {
		background: rgba(0, 0, 0, 0.25);
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 1;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-ms-grid-row-align: center;
		align-items: center;
		z-index: 100;
	}

	.prize-box {
		margin: 0 auto;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.prize-img {
		width: 100vw;
		max-height: 231px;
		max-width: 375px;
	}

	.prize-img2 {
		width: 100vw;
		max-height: 120px;
		max-width: 375px;
	}

	.prize-msg {
		width: 78.5vw;
		max-width: 294.5px;
		text-align: center;
		background: #ffffff;
		padding-bottom: 6px;
		font-size: 13pt;
	}

	.prize_name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.continue {
		width: 240px;
		height: 40px;
		margin: 28px auto;
		background: #ff5c5c;
		line-height: 40px;
		color: #ffffff;
		border-radius: 20px;
	}

	.men {
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: 1;
		left: 0;
		top: 0;
	}
</style>
